<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in arr"
        :key="index"
        :class="activeIndex === index ? 'active':''"
        @click="handleClick(index)"
      >{{item}}</li>
    </ul>
    <br />
    <div>{{contentArr[activeIndex]}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: ['小明', '小胡', '小红'],
      activeIndex: 0,
      contentArr: [23, 34, 46]
    }
  },
  methods: {
    handleClick(ind) {
      this.activeIndex = ind
    }
  }
}
</script>
<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  float: left;
}
.active {
  background-color: pink;
}
</style>
